<template>
  <div>
    <div class="draw" v-if="loadState == false">
      <img
        class="loading"
        src="../assets/loading/Fg7PS0IesulBHFZwCvfx9-pj6fgs.gif"
        alt=""
      />
    </div>
    <div class="draw" v-if="loadState == true">
      <div class="draw-list" v-for="(de, di) in allCinemasArray" :key="di">
        <div class="list">
          <router-link :to="{ path: '/movieBuy', query: { deId: de.id } }">
            <!-- 电影院name -->
            <div class="list-top">
              <p class="list-top-p">{{ de.name }}</p>
              <span class="s-1">
                {{
                  de.sellPrice.length == 2 ? de.sellPrice + ".0" : de.sellPrice
                }}
                元起
              </span>
            </div>
            <!-- 地址 -->
            <div class="list-address">
              <p>{{ de.addr }}</p>
              <span>{{ de.distance }}</span>
            </div>
            <!-- title -->
            <div class="list-txt">
              <span
                :style="`color:${ce.color};border:1px solid ${ce.color}`"
                v-for="(ce, ci) in de.labels"
                :key="ci"
                >{{ ce.name }}</span
              >
            </div>
            <!-- 场次 -->
            <div class="list-session">
              <p>{{ de.showTimes }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState, mapMutations } from "vuex";

export default {
  // ...mapMutations(["changeCinemaArray"]),
  name: "cinemas",
  props: ["cinemas"],
  data() {
    return {
      loadState: false, //loading状态
      allCinemasArray: [], //渲染数据
    };
  },
  watch: {
    cinemas(value) {
      this.allCinemasArray = [];
      this.loadState = true;
      this.allCinemasArray = value.cinemas;
      //  存值
      // this.changeCinemaArray(value.cinemas);
      console.log("获取传递的数据---->", this.allCinemasArray);
    },
  },
  methods: {
    // ...mapMutations(["changeCinemaArray"]),
  },
  mounted() {
    console.log("获取传递的数据---->", this.cinemas);
  },
};
</script>

<style lang="scss" scoped>
// 渲染数据
.draw {
  width: 100%;
  .loading {
    width: 100%;
  }
  .draw-list {
    background: rgb(248, 248, 248);
    .list {
      padding: 7px 0;
      border-radius: 7px;
      width: 352px;
      margin: 14px auto;
      .list-top {
        display: flex;
        align-items: center;
        .list-top-p {
          width: 80%;
          // display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 20px;
          font-weight: bold;
        }
        .s-1 {
          // display: inline-block;
          font-size: 16px;
          color: #f00;
          // font-weight: bold;
          .s-2 {
          }
        }
      }
      // 地址
      .list-address {
        display: flex;
        align-items: center;
        p {
          width: 90%;
          font-size: 12px;
          padding: 12px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span {
          font-size: 12px;
        }
      }
      // title
      .list-txt {
        width: 100%;
        font-size: 0;
        // height: 30px;
        // 有问题
        // display: flex;
        span {
          display: inline-block;
          font-size: 10px;
          // color: #f00;
          margin-right: 6px;
          padding: 1px 2px;
          border-radius: 3px;
          border: 1px solid transparent;
          box-sizing: border-box;
        }
      }
      // 场次
      .list-session {
        p {
          font-size: 12px;
          color: rgb(179, 179, 179);
          padding-top: 10px;
        }
      }
    }
  }
}
</style>